<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 100px;
            height: 100px;
            background-color: #000;
            position: absolute;
            /* left: 1000px; */
        }
    </style>
</head>
<body>

    <div class="a"></div>

    <script>

        // 缓冲运动

        //    距离终点很远的时候，速度很大
        //    距离终点越来越近的过程中  速度越来越慢


        // 缓冲因子    
        //    缓冲因子越小  初始速度越大

        //   速度是计算出来的 ，不是自己定义的


        
        var oA = document.querySelector('.a') ;

        var end = 1000 ;

        // var t = setInterval(function(){
        //     var x = oA.offsetLeft ;
        //     var speed = (end - x) / 10 ;

        //     // if(speed > 0) {
        //     //     // 速度为正数 --- 正向运动   0.3 -> 1  向上取整
        //     //     speed = speed < 1 ? Math.ceil(speed) : speed ;
        //     // } else {
        //     //     // 速度为负数 --- 反向运动   -0.3 -> -1  向下取整
        //     //     speed = speed > -1 ? Math.floor(speed) : speed ;
        //     // }

        //     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) ;
            
        //     x += speed ;
        //     oA.style.left = x + 'px' ;
        //     if(Math.abs(x - end) <= Math.abs(speed)) {
        //         x = end ;
        //         oA.style.left = x + 'px' ;
        //         clearInterval(t)
        //     }
        // } , 50)

            

        function move(ele , end , fn) {
            var t = setInterval(function(){
                var x = ele.offsetLeft ;
                var speed = (end - x) / 10 ;

                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) ;
                
                x += speed ;
                ele.style.left = x + 'px' ;
                if(Math.abs(x - end) <= Math.abs(speed)) {
                    x = end ;
                    ele.style.left = x + 'px' ;
                    clearInterval(t) ;
                    fn && fn()
                }
            } , 50)

        }

        



    </script>
    
</body>
</html>